<template>
  <div class="indexPage w100">
    <!--第一大块-->
    <div class="partOne ovh"
         :class="{'one-wx': isWx}">
      <!--用户信息-->
      <template v-if="!isWx">
        <!-- 非分销版显示 -->
        <div class="userInfo pos">
          <div class="logo"
               @click="showUserInfo">
            <div class="ego">
              <img :src="userInfo.icon || defaultIcon" />
            </div>
            <div class="name">
              {{ userInfo.uid ? wxUserInfo.nickname : '登录' }}
            </div>
          </div>
          <div class="changeGrade"
               @click="(isActive = currGrade) && (showGrade = true)">
            <span class="grade">{{currGrade.name || '切换年级'}}</span>
            <span class="iconfont icon-down"></span>
          </div>
        </div>
        <!--切换年级的底部弹框-->
        <van-popup v-model="showGrade"
                   position="bottom">
          <div class="classPick">年级设置</div>
          <ul class="flex classList">
            <li class="classPicked"
                :class="{ actived: isActive.id === item.id }"
                @click="isActive = item"
                v-for="(item, index) in gradeList"
                :key="index">
              {{ item.name }}
            </li>
          </ul>
          <div class="ensureBtn"
               @click="setCurrGrade(isActive) || (showGrade = false)">
            确定
          </div>
        </van-popup>
        <!--轮播图-->
      </template>
      <div class="swiper">
        <van-swipe :autoplay="3000"
                   indicator-color="white"
                   touchable>
          <van-swipe-item v-for="(item, index) in imageList"
                          :key="index">
            <img :src="item.bigimg"
                 @click="bannerLinkTo(item)" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!--科目导航-->

      <div class="projectNav pic-wrapper"
           ref="picWrapper">
        <ul class="pic_list"
            :class="{'true flex jcb': isWx}"
            ref="picList"
            :style="{width: !isWx ? 4.4 * projectNavs.length + 'rem' : ''}">
          <li v-for="(item, index) in (isWx ? subjectList : projectNavs)"
              :key="index"
              v-show="item.show !== false"
              class="pic_item"
              @click="itemClick(item)">
            <img class="src"
                 :src="item.src || `${srcPath}home_ico_${item.name}.png`"
                 alt="" />
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!--第二大块-->
    <div v-if="!isWx"
         :class="['partTwo ovh', '' + !hasAudio]">
      <van-tabs :ellipsis="false"
                v-model="active"
                color="#ff8611"
                @click="toggleTabs">
        <van-tab :title="item.name"
                 v-for="item in tabs"
                 :key="item.id">
        </van-tab>
      </van-tabs>

      <!-- 课程列表 -->
      <van-list v-model="loading"
                :finished="!hasAudio && finished"
                :offset="0"
                finished-text="没有更多了!"
                @load="curr++">
        <div class="picList flex">
          <div class="pic"
               v-for="(subitem, subindex) in tabsContent"
               :key="subindex"
               @click="linkTo('/classdetail/' + subitem.id)">
            <img :src="subitem.bgimg"
                 alt="" />
            <div class="tabContent wot2">{{ subitem.name }}</div>
          </div>
          <div class="pic"
               v-for="i in (3 - (tabsContent.length % 3)) % 3"
               :key="i * 0.1"></div>
        </div>
      </van-list>
    </div>

    <!-- 专项提高 -->
    <div class="zx-tg"
         v-if="isWx">
      <div class="zx-tg-title-inner title-inner-df">专项提高</div>
      <div class="zx-tg-list flex fww jcb">
        <div class="zx-tg-item flex-col jcc aic"
             v-for="(item, ind) in improveList"
             :key="ind"
             @click="impClick(item)"
             :style="{backgroundColor: item.bgc}">
          <img class="zx-tg-img vam w50 h50"
               :src="item.img">
          <div class="zx-tg-text">{{item.name}}</div>
        </div>
      </div>
    </div>

    <!-- 兴趣拓展 -->
    <div class="xq-tz lh1"
         v-if="isWx">
      <div class="xq-tz-title-inner title-inner-df">兴趣拓展</div>
      <div class="xq-tz-list flex fww jcb">
        <div class="xq-tz-item"
             v-for="(item, ind) in xqList"
             :key="ind"
             @click="linkTo('/classlist/'+item.id)">
          <img :src="item.img"
               alt=""
               class="xq-tz-img vam" />
          <div class="xq-tz-name">{{item.name}}</div>
          <div class="xq-tz-desc">{{item.desc}}</div>
        </div>
      </div>
    </div>

    <!-- 中小学非渠道版其它 -->
    <template v-if="hasAudio">
      <div v-if="!isWx"
           class="show-more-btn tac"
           @click="linkTo('/courselist/video')">查看更多</div>
      <!-- 有声专区 -->
      <div class="sound-zt">
        <div class="sound-title jcb flex aic">
          <span class="sound-title-inner">有声专区</span>
          <span @click="linkTo('/courselist/audio')">查看更多</span>
        </div>
        <div class="sound-box-list">
          <course-card :is-wx="isWx" @click-callback="linkTo('/audiodetail/' + item.id)"
                       :item="item"
                       v-for="(item, ind) in soundList"
                       :key="ind"></course-card>
        </div>
      <div class="page-end tac">我是有底线的</div>
      </div>
    </template>

    <!--左侧个人中心蒙层-->
    <van-popup v-model="show"
               position="left">
      <mine is-component
            @logout="logOutEvent"></mine>
    </van-popup>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
import { mapGetters, mapMutations } from 'vuex';
import mine from '@/pages/mine/mine';

export default {
  name: 'IndexPage',
  components: {
    mine
  },
  
  computed: {
    ...mapGetters([
      'loginThenPath',
      'userInfo',
      'grades',
      'allCourse',
      'tagList',
      'productInfo',
      'wxUserInfo',
      'defaultIcon',
      'currGrade',
      'hasAudio',
      'isWx',
      'xueKe'
    ])
  },
  data() {
    return {
      soundList: [],

      rewardInfo: {}, // 活动信息详情
      currIsBack: false,
      picScroll: null,
      urlQuery: {},
      srcPath: './static/images/mipmap_xhdpi/',
      isActive: {},
      gradeList: [],
      imageList: [],
      subjectList: [
        {
          path: '/tbcourselist',
          name: 'yuwen',
          src: require('@/images/home/course_yuwen.png'),
          title: '语文',
          id: 0
        },
        {
          path: '/tbcourselist',
          name: 'shuxue',
          src: require('@/images/home/course_shuxue.png'),
          title: '数学',
          id: 1
        },
        {
          path: '/tbcourselist',
          name: 'yingyu',
          src: require('@/images/home/course_yingyu.png'),
          title: '英语',
          id: 2
        },
        {
          path: '/tbcourselist',
          name: 'kexue',
          src: require('@/images/home/course_kexue.png'),
          title: '科学',
          id: 3
        }
      ],
      xqList: [
        {
          name: '艺术培养',
          id: 30,
          img: 'http://video.english163.com/iexue_pic/Iyrk941590574438.png',
          desc: '在艺术中发现与表达自我'
        },
        {
          name: '科学动漫',
          id: 1,
          img: 'http://video.english163.com/iexue_pic/eHtrX91590574236.png',
          desc: '有趣的动画涨知识'
        },
        {
          name: '故事大全',
          id: 4,
          img: 'http://video.english163.com/iexue_pic/GV2Xb91590574130.png',
          desc: '丰富和发展想象力'
        },
        {
          name: '中小学书法',
          id: 55,
          img: 'http://video.english163.com/iexue_pic/iAO27L1590574360.png',
          desc: '传承民族文化'
        },
        {
          name: '科学声音',
          id: 70,
          img: 'http://video.english163.com/iexue_pic/lt54vn1590574284.png',
          desc: '传播科学精神和科学思维'
        },
        {
          name: '诗词精选',
          id: 3,
          img: 'http://video.english163.com/iexue_pic/6GelyW1590574319.png',
          desc: '唐诗宋词三字经'
        },
        {
          name: '国学经典',
          id: 74,
          img: 'http://video.english163.com/iexue_pic/5yXzJT1590574194.png',
          desc: '扩充课堂的知识性与趣味性'
        },
        {
          name: '安全知识',
          id: 15,
          img: 'http://video.english163.com/iexue_pic/fRsmoE1590574031.png',
          desc: '学习安全知识，突发情况不慌张'
        }
      ],
      improveList: [
        {
          name: '奥数',
          id: 2,
          img: require('@/images/home/zt_as.png'),
          bgc: '#e6faec'
        },
        {
          name: '作文',
          img: require('@/images/home/zt_zw.png'),
          bgc: '#e3f3ff',
          id: 57
        },
        {
          name: '少儿英语',
          id: 5,
          img: require('@/images/home/zt_yy.png'),
          bgc: '#ffecec'
        },
        {
          name: '状元课堂',
          id: 9,
          img: require('@/images/home/zt_kx.png'),
          bgc: '#f2e7ff'
        },
        {
          name: '语文知识点',
          id: 75,
          xid: 27,
          img: require('@/images/home/zt_ywzsd.png'),
          bgc: '#fff3e5'
        },
        {
          name: '数学知识点',
          id: 75,
          xid: 28,
          img: require('@/images/home/zt_sxzsd.png'),
          bgc: '#edeeff'
        },
        {
          name: '英语知识点',
          id: 75,
          xid: 29,
          img: require('@/images/home/zt_yyzsd.png'),
          bgc: '#ffe9f7'
        },
        {
          name: '必考点',
          id: 24,
          img: require('@/images/home/zt_bkd.png'),
          bgc: '#dcf8fc'
        }
      ],
      projectNavs: [
        {
          path: '/courselist/audio',
          name: 'cidian',
          title: '有声专区',
          show: false,
          src: require('@/images/audio_ico_03.png')
        },
        { path: '/dictionary', name: 'cidian', title: '词典' },
        { name: 'aoshu', title: '奥数', id: 2 },
        { name: 'kexue', title: '科学', id: 1 },
        { name: 'zuowen', title: '作文', id: 57 },
        { name: 'yishu', title: '艺术', id: 30 },
        { name: 'gushici', title: '古诗词', id: 16 },
        { name: 'guoxue', title: '国学', id: 3 },
        { name: 'gushi', title: '故事', id: 4 }
      ],
      active: 0,
      tabs: [],
      tabsContent: [],
      show: false,
      myIcon: [
        {
          icon: 'personal_icon_collection.png',
          title: '我的收藏',
          path: '/mycollect'
        },
        {
          icon: 'personal_icon_playback.png',
          title: '播放记录',
          path: '/playrecord'
        },
        {
          icon: 'personal_icon_order.png',
          title: '我的订单',
          path: '/myorder'
        },
        { icon: 'icon_prize.png', title: '有奖兑换', path: '/exchange' },
        { icon: 'icon_bdshouji.png', title: '绑定手机', path: '/bind' }
      ],
      showGrade: false,
      index: 0,
      isBought: false,

      list: [],
      loading: false,
      finished: true,
      cid: '',
      curr: 1,
      limits: 9,
      total: 0
    };
  },
  watch: {
    currGrade(val, prev) {
      if ((prev.section === 4 && val.section === 4) || val.id === prev.id)
        return;
      this.getXuekeId();
    },
    curr(val, prev) {
      this.getIndexPageInfo();
    },
    grades(val, prev) {
      this.getGradesList();
    }
  },
  created() {
    if (this.loginThenPath) {
      return this.linkTo(this.loginThenPath, true);
    }
    if (this.hasAudio) {
      this.limits = 6;
      this.projectNavs[0].show = true;
    }

    this.$store.commit('setIsBack', false);

    !this.isWx && this.getGradesList();

    this.getImageList();

    this.hasAudio && this.getSoundList();
  },
  mounted() {
    this.$nextTick(() => {
      if (this.isWx) return;
      if (!this.picScroll) {
        this.picScroll = new BScroll(this.$refs.picWrapper, {
          scrollX: true,
          eventPassthrough: 'vertical'
        });
      } else {
        this.picScroll.refresh();
      }
    });
  },
  methods: {
    ...mapMutations([
      'setUserInfo',
      'setLoginThenPath',
      'setWxUserInfo',
      'setCurrGrade',
      'setXueKe',
      'setIsLogin',
      'setAllCourse'
    ]),
    itemClick(item) {
      if (this.isWx) {
        this.$router.push({
          path: item.path,
          query: {
            actId: item.id
          }
        });
      } else {
        this.linkTo(item.path || '/classlist/' + item.name);
      }
    },
    impClick(item) {
      this.$router.push({
        name: 'ClassList',
        params: {
          type: item.id,
          xid: item.xid
        }
      });
    },

    // 获取音频列表 soundList
    getSoundList() {
      this.http
        .$post('api/resource.course/get_jd_course_list', {
          limits: 3,
          is_https: 1,
          module_id: 343
        })
        .then(res => {
          this.soundList = res.list.slice(0, 3).map(e => {
            e.name = e.name.split(/[:：]/);
            e.name = e.name[1] || e.name[0];
            return e;
          });
        //   console.log(this.soundList)
        })
        .catch(console.log);
    },

    // 获取年级列表
    getGradesList() {
      // 选择默认年级
      let val = this.grades;
      this.gradeList = val;
      this.currGrade.id && val.find(e => e.id === this.currGrade.id)
        ? this.getXuekeId()
        : this.setCurrGrade(this.gradeList[0] || {});
    },

    // 轮播图
    getImageList() {
      this.http
        .$post('api/product/get_advertising_list', {
          page: 1,
          limits: 1000,
          is_https: 1,
          ...this.productInfo
        })
        .then(res => {
          // console.log(res.list); // type, url, bigimg
          this.imageList = res.list;
        })
        .catch(console.log);
    },

    //获取首页数据
    getIndexPageInfo(init) {
      if (!this.xueKe || !this.tagList.section || !this.currGrade.id) return;
      if (init === true) return (this.curr = 1);
      if (this.hasAudio && this.curr > 1) {
        this.loading = false;
        this.finished = true;
        return;
      }
      let str = `_${this.currGrade.section}_${this.xueKe}_${
        this.currGrade.section !== 4 ? this.currGrade.id : ''
      }`;
      let res = this.allCourse[str] || { total: 0, list: [] };

      if (res.total && res.list.slice((this.curr - 1) * this.limits).length) {
        if (!this.hasAudio) {
          this.tabsContent = res.list;
        } else {
          this.tabsContent = res.list.slice(0, 6);
        }
        this.total = res.total;
        this.loading = false;
        this.finished = this.total <= this.tabsContent.length;
      } else {
        this.http
          .$post('api/resource.course/get_course_list', {
            curr: this.curr,
            limits: this.limits,
            is_https: 1,
            xueke_id: this.xueKe,
            xueduan_id: this.currGrade.section,
            module_id: 98, // 只要同步名师视频
            nianji_id: this.currGrade.section !== 4 ? this.currGrade.id : ''
          })
          .then(res => {
            this.curr === 1 && (this.tabsContent = []);
            this.tabsContent.push(
              ...res.list.map(e => {
                e.name = e.name.split(/[:：]/);
                e.name = e.name[1] || e.name[0];
                return { name: e.name, bgimg: e.bgimg, id: e.id };
              })
            );
            this.allCourse[str] = {
              total: res.total,
              list: this.tabsContent
            };
            this.setAllCourse(this.allCourse);
            this.getIndexPageInfo();
          })
          .catch(this.$err);
      }
    },
    //获取学科列表
    getXuekeId() {
      this.tabsContent = [];
      this.http
        .$post('api/resource.tag/get_tag', {
          nianji_id: this.currGrade.section !== 4 ? this.currGrade.id : '',
          xueduan_id: this.currGrade.section,
          module_id: 98
        })
        .then(res => {
          this.tabs = res.subjects.filter(e => e.id !== 38);
          let item = this.tabs.find(e => e.id === this.xueKe) ||
            this.tabs[0] || { id: '' };
          this.setXueKe(item.id);
          this.active = this.tabs.indexOf(item);
          this.getIndexPageInfo(this.curr !== 1);
        })
        .catch(console.log);
    },
    //切换tab栏
    toggleTabs(index, title) {
      let id = this.tabs[index].id;
      if (this.xueKe === id) return;
      this.setXueKe(id);
      this.getIndexPageInfo(this.curr !== 1);
    },
    //显示左侧用户信息/登录
    showUserInfo() {
      if (this.userInfo.uid) {
        this.show = true;
      } else {
        this.setLoginThenPath('/');
        this.toLogin();
      }
    },
    //科目导航点击跳转
    linkTo(path, to) {
      if (
        !to &&
        !this.wxUserInfo.is_register &&
        !this.userInfo.uid &&
        !/^\/dictionary/i.test(path)
      ) {
        // if (!this.wxUserInfo.is_register && this.urlQuery.uid && !this.userInfo.uid && !/^\/(dictionary|classlist)/i.test(path)) {
        this.setLoginThenPath(path);
        return this.toLogin();
      }
      if (path === '/exchange' && this.userInfo.phone === '') {
        this.$notify({
          type: 'success',
          background: '#ff976a',
          duration: 1500,
          message: '请先绑定手机号'
        });
        this.$router.push({
          path: '/bind',
          query: {
            form: '/exchange'
          }
        });
        return false;
      }
      if (path === '/bind' && this.userInfo.phone !== '') {
        return this.$router.push({
          path: '/bind',
          query: {
            changePhone: true
          }
        });
      }
      this.setLoginThenPath('');
      this.$router.push(path);
    },
    // 轮播图跳转url
    bannerLinkTo(banner = {}) {
      let { type, url, subject_id, course_id } = banner;
      if (type === 3 && url) {
        if (/^https?/.test(url)) {
          location.href = url;
        } else if (/^\//.test(url)) {
          this.linkTo(url);
        }
      } else if (type === 6 && subject_id) {
        // 专题
        let item = this.projectNavs.find(e => e.id === subject_id);
        this.linkTo('/classlist/' + (item ? item.name : subject_id));
      } else if (type === 1 && course_id) {
        // 课程
        this.linkTo('/classdetail/' + course_id);
      }
    },
    // 跳转登录页面
    toLogin(router = this.$route.fullPath) {
      this.util
        .login('', router)
        .then(userInfo => {
          this.currIsBack = false;
          this.wxUserInfo.is_register = true;
          this.setWxUserInfo(this.wxUserInfo);
        })
        .catch(err => {
          typeof err !== 'string' && this.$err(err);
        });
    },
    //退出登录
    logOutEvent() {
      this.show = false;
    }
  }
};
</script>

<style lang="less" scoped>
.indexPage {
  background-color: #f2f2f2;
  .page-end {
    padding: 1.25rem 0;
    line-height: 1rem;
    font-size: 0.63rem;
    color: #bfbdc5;
    &:after,
    &:before {
      margin: 0 0.63rem;
      content: '';
      display: inline-block;
      width: 25%;
      height: 0.03rem;
      background-color: #f0f0f0;
      vertical-align: middle;
    }
  }

  .show-more-btn {
    margin-bottom: 0.63rem;
    padding: 0.12rem 0 1.25rem;
    color: #999;
    line-height: 1;
    background-color: #fff;
  }

  .title-inner-df {
    //   line-height: 3rem;
    //   color: #333;
    //   font-size: 1rem;
    color: #222;
    font-size: 1.13rem;
    line-height: 3.53rem;
    padding-top: 0.63rem;
  }

  .zx-tg {
    padding: 0 0.8rem;
    background-color: #fff;
    &-item {
      margin-bottom: 0.63rem;
      width: 4.91rem;
      height: 5.38rem;
      border-radius: 0.31rem;
    }
    &-text {
      font-size: 0.81rem;
      color: #4e4a5e;
    }
  }

  .xq-tz {
    padding: 0 0.8rem;
    background-color: #fff;
    color: #96949b;
    font-size: 0.69rem;
    &-item {
      margin-bottom: 0.94rem;
    }
    &-img {
      margin-bottom: 0.63rem;
      width: 10.47rem;
      height: 6.25rem;
      border-radius: 0.31rem;
    }
    &-name {
      margin-bottom: 0.1875rem;
      font-size: 0.88rem;
      color: #4e4a5e;
    }
  }

  .sound-zt {
    padding: 0 0.8rem 1rem;
    background-color: #fff;
    .sound-title {
      line-height: 3.53rem;
      color: #a9a9a9;
      font-size: 0.81rem;
      &-inner {
        color: #222;
        font-size: 1.13rem;
      }
    }
    .sound-box-list {
      > :not(:last-child) {
        margin-bottom: 1rem;
      }
    }
  }

  .partOne {
    background-color: #fff;
    margin-bottom: 0.63rem;
    padding: 0.5rem 1rem 1.25rem;
    &.one-wx {
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .userInfo {
      display: flex;
      justify-content: space-between;
      height: 2.44rem;
      line-height: 2.44rem;

      .logo {
        display: flex;

        .ego {
          width: 2.34rem;
          height: 2.34rem;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .name {
          font-size: 0.88rem;
          color: #333;
          margin-left: 0.5rem;
        }
      }

      .changeGrade {
        width: 4.88rem;
        height: 1.44rem;
        line-height: 1.44rem;
        font-size: 0.75rem;
        color: #666;
        background-color: #f3f3f3;
        border-radius: 0.72rem;
        margin-top: 0.5rem;
        text-align: center;

        img {
          margin-top: 0.2rem;
        }

        // .selector {
        //   border: none;
        //   outline: none;
        //   background-color: #f3f3f3;
        //   border-radius: 0.72rem;
        //   font-size: 0.75rem;
        //   color: #666;
        // }
      }
    }

    .swiper {
      margin-top: 0.5rem;
      margin-bottom: 1.28rem;

      .van-swipe-item {
        height: 7.81rem !important;
        display: flex;

        img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
        }
      }
    }

    .projectNav {
      width: 100%;

      ul {
        display: flex;
        white-space: nowrap;
        //滚动的盒子宽度一定要比最外层的盒子宽才能滚动
        /*width: 160%;*/
        &.true {
          padding: 0 0.94rem;
          li {
            margin-right: 0;
          }
          .src {
            width: 2.09rem;
            height: 1.91rem;
            border-radius: 0;
          }
        }

        li {
          margin-right: 1.59rem;
          text-align: center;

          img {
            width: 2.81rem;
            height: 2.81rem;
            border-radius: 1rem;
          }

          span {
            font-size: 0.75rem;
            color: #333;
            display: block;
          }
        }
      }
    }

    .van-popup {
      .classPick {
        height: 3.06rem;
        line-height: 3.06rem;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
        color: #666666;
      }

      .classList {
        flex-wrap: wrap;
        margin-top: 1.3rem;
        > :nth-child(n) {
          background-color: #f0f0f0;
          padding: 0.5rem 0.94rem;
          margin-left: 0.8rem;
          margin-bottom: 0.8rem;
          border-radius: 0.3rem;
        }
      }

      .ensureBtn {
        margin: 2.5rem 1.8rem 1.82rem;
        line-height: 2.64rem;
        color: #fff;
        background-color: #ff8611;
        text-align: center;
        border-radius: 0.5rem;
      }

      .actived {
        background-image: linear-gradient(
          to right,
          #ffb808,
          #ff8711
        ) !important;
      }
    }
  }

  .partTwo {
    background-color: #fff;
    position: relative;
    margin-bottom: 0.5rem;
    overflow: hidden;
    &.false {
      margin-bottom: 0;
    }

    /deep/ .van-tabs {
      padding-bottom: 0.5rem;

      .van-tabs__wrap {
        padding-bottom: 0.63rem;
      }

      //选中的下划线
      .van-tabs__line {
        height: 0.19rem;
        border-radius: 0.09rem;
      }

      //选中项的字体大小
      .van-tab--active {
        font-size: 1.13rem !important;
      }

      .van-tabs__content {
        margin-top: 1.06rem;
      }

      .van-tab {
        font-size: 1rem;
        flex: 0.15 0 auto;
      }
    }

    .picList {
      flex-wrap: wrap;
      width: 100%;

      .pic {
        margin-bottom: 1.06rem;
        flex: 1;
        flex-wrap: wrap;
        text-align: left !important;

        img {
          width: 6.28rem;
          height: 8.72rem;
          margin-left: 0.8rem;
          border-radius: 0.3rem;
        }

        .tabContent {
          width: 5.88rem;
          font-size: 0.81rem;
          margin-left: 0.8rem;
          text-align: left;
        }
      }
    }

    .inviteLogo {
      width: 5.6rem;
      height: 5.6rem;
      right: 0.2rem;
      top: 19.94rem;
      animation: identifier 1s linear infinite;

      img {
        width: 100%;
        height: 100%;
      }
    }

    @keyframes identifier {
      0% {
        transform: translateY(10%);
      }
      50% {
        transform: translateY(-10%);
      }
      100% {
        transform: translateY(10%);
      }
    }
  }

  .van-pagination {
    // margin: 0.5rem 0;
  }

  .btn {
    bottom: 0.5rem;

    .btn-out {
      width: 10.13rem;
      height: 3.13rem;
      border-radius: 1.6rem;
      color: #fff;
      font-size: 1.06rem;
      line-height: 1;
    }

    .inviteBtn {
      background-image: linear-gradient(0, #ff8611, #f9ad0b),
        linear-gradient(#ffa628, #ffa628);
      box-shadow: 0 0.06rem 0.31rem 0 rgba(245, 148, 13, 0.6);
    }

    .buyBtn {
      background-image: linear-gradient(0, #ff6128, #ff8255),
        linear-gradient(#ff6128, #ff6128);
      box-shadow: 0 0.06rem 0.31rem 0 rgba(255, 118, 69, 0.5);
    }

    .font {
      font-size: 0.75rem;
    }
  }

  .user-info {
    width: 16.56rem;
    background-color: #f3f3f3;

    .vipInfo {
      background-color: #fff;
      padding: 1.25rem 0.94rem 0.72rem;

      .user {
        height: 4.06rem;
        margin-bottom: 0.9rem;

        .ego {
          margin-right: 0.56rem;
          width: 4rem;
          height: 4rem;
          border-radius: 50%;
        }

        .name {
          padding: 0.88rem 0;
          line-height: 1;

          .username {
            margin-bottom: 0.48rem;
            font-size: 1rem;
            color: #333;
          }

          .Uid {
            font-size: 0.75rem;
            color: #bbb;
          }
          .Uid.Tel {
            margin-top: 0.4rem;
          }
        }
      }

      .openVip {
        padding: 0.72rem 0.5rem;
        background: url(../../../static/images/mipmap_xhdpi/personal_bg_vip.png)
          no-repeat top left / 100% 100%;

        .crown {
          font-size: 0.84rem;
          line-height: 0.81rem;
          color: #f1d5bd;

          .ico {
            width: 0.94rem;
            height: 0.81rem;
            margin-right: 0.25rem;
          }
        }

        .remark {
          margin-top: 0.44rem;
          font-size: 0.75rem;
          color: #ecdbc0;
        }

        .vipButton {
          right: 0.5rem;
          width: 4.06rem;
          height: 1.44rem;
          line-height: 1.42rem;
          background-image: linear-gradient(90deg, #fe8655, #fc5368);
          border-radius: 0.72rem;
          font-size: 0.75rem;
          color: #fff;
        }
      }
    }

    .my {
      margin: 0.63rem 0 5.63rem;
      width: 15.94rem;
      line-height: 2.94rem;
      font-size: 0.94rem;
      color: #222;

      .item {
        padding-left: 2.69rem;
        height: 2.94rem;
        background-color: #fff;

        & + .item {
          margin-top: 0.03rem;
        }
      }

      .ico {
        left: 0.94rem;
        width: 1.13rem;
      }
    }

    .logOutBtn {
      width: 15.94rem;
      height: 2.94rem;
      line-height: 2.94rem;
      background-color: #fff;
      font-size: 0.94rem;
      color: #ff8611;
    }
  }
}
</style>
